<template>
  <el-dialog v-model="dialogTableVisible" title="订单信息" width="800">
    <el-table :data="data">
      <el-table-column label="标题" width="300">
        <template #default="scope">{{ scope.row.spu.title + " ( " + scope.row.sku.title + " ) " }}</template>
      </el-table-column>
      <el-table-column property="sku.price" label="价格" width="200" />
      <el-table-column property="count" label="数量" />
      <el-table-column property="get" label="小计" />
    </el-table>
    <div style="margin-left: 600px">总价: {{ summary }}</div>
    <div>
      地址:
      <el-cascader v-model="nowAddress" :options="addressList" :show-all-levels="false" />扣款账户:
      <el-select v-model="value" style="width: 240px">
        <el-option v-for="item in options" :key="item" :label="item" :value="item" />
      </el-select>
    </div>
    <el-button @click="submitOrder">提交订单</el-button>
  </el-dialog>
</template>

<script setup>
import { ref, defineProps, onMounted } from "vue";
import { getAddressApi, saveOrder } from "../../../apis/order";

const prop = defineProps({
  cart: Object
});

const data = ref([]);

const summary = ref(0);

const dialogTableVisible = ref(false);

const addressList = ref([]);

const nowAddress = ref("");

const value = ref("账号1");

const options = ref(["账号1", "账户2"]);

const totalCount = ref(0);

const getAddressData = async () => {
  const res = await getAddressApi();
  let templist = [];
  templist = res.data.data;
  console.log(templist);
  let areas = [];
  //对地址信息按照地区进行分类
  templist.forEach(i => {
    let index = areas.findIndex(j => {
      if (i.area == j.value) return true;
    });

    if (index != -1) {
      //已经出现
      areas[index].children.push({
        value: i.detail+" ("+i.tel+")",
        label: i.detail+" ("+i.tel+")",
        tel:i.tel
      });
    } else {
      //第一次出现
      areas.push({
        value: i.area,
        label: i.area,
        children: [
          {
            value: i.detail+" ("+i.tel+")",
            label: i.detail+" ("+i.tel+")",
            tel:i.tel
          }
        ]
      });
    }

    if (i.isDefault == true) {
      nowAddress.value = i.detail+" ("+i.tel+")";
    }
  });

  addressList.value = areas;
  console.log(areas);
};

const submitOrder = async () => {
  const spuInfo = [];
  data.value.forEach(i => {
    spuInfo.push({
      count: i.count,
      spuId: i.spu.id,
      skuId: i.sku.id,
      skuTitle: i.sku.title,
      skuPrice: i.sku.price
    });
  });

  if (nowAddress.value instanceof Array) {
    nowAddress.value = nowAddress.value[1];
  }

  const order = {
    totalAmount: parseInt(summary.value),
    totalCount: totalCount.value,
    snapAddress: nowAddress.value.split(" (")[0],
    tel:nowAddress.value.split(" (")[1].substring(0,nowAddress.value.split(" (")[1].length-1),
    spuInfo: spuInfo
  };

  const res = await saveOrder(order);

  if (res.data.code == 0) {
    alert("订单提交成功");
    localStorage.removeItem("orderItem");
    location.reload();
  } else if (res.data.masg.includes("价格异常")) {
    alert("订单信息异常!请诚信购买商品...");
    localStorage.removeItem("orderItem");
    location.reload();
  } else {
    alert("订单信息异常!,请尝试重新选择商品！");
  }

  dialogTableVisible.value = false;
};

const open = () => {
  dialogTableVisible.value = true;
  if (summary.value == 0) {
    data.value = prop.cart.map((item, index) => {
      totalCount.value += item.count;
      return Object.assign({}, item, { get: item.count * item.sku.price });
    });

    data.value.forEach(element => {
      summary.value += element.get;
    });

    summary.value = summary.value.toFixed(2);
  }
  console.log(data.value);
};

onMounted(() => getAddressData());

defineExpose({ open });
</script>

<style scoped>
</style>